<ngx-graph
  [view]="[800, 500]"
  [links]="[
    {
      id: 'a',
      source: 'a1',
      target: 'a2'
    },
    {
      id: 'b',
      source: 'a2',
      target: 'a3'
    },
    {
      id: 'c',
      source: 'a2',
      target: 'a4'
    },
    {
      id: 'd',
      source: 'a1',
      target: 'a5'
    },
    {
      id: 'e',
      source: 'a1',
      target: 'a4'
    },
    {
      id: 'f',
      source: 'a1',
      target: 'a3'
    },
    {
      id: 'g',
      source: 'a4',
      target: 'a6'
    },
    {
      id: 'h',
      source: 'a1',
      target: 'a6'
    },
    {
      id: 'i',
      source: 'a6',
      target: 'a7'
    }
  ]"
  [nodes]="[
    {
      id: 'a1',
      label: 'N1'
    },
    {
      id: 'a2',
      label: 'N2'
    },
    {
      id: 'a3',
      label: 'N3'
    },
    {
      id: 'a4',
      label: 'N4'
    },
    {
      id: 'a5',
      label: 'N5'
    },
    {
      id: 'a6',
      label: 'N6'
    },
    {
      id: 'a7',
      label: 'N7'
    }
  ]"
  [layout]="layout"
  [curve]="curve"
  [nodeWidth]="20"
  [nodeHeight]="20"
  [enableZoom]="true"
  [draggingEnabled]="false"
  [autoZoom]="true"
>
  <ng-template #defsTemplate>
    <svg:marker id="arrow" viewBox="0 -5 10 10" refX="8" refY="0" markerWidth="4" markerHeight="4" orient="auto">
      <svg:path d="M0,-5L10,0L0,5" class="arrow-head" />
    </svg:marker>
  </ng-template>

  <ng-template #linkTemplate let-link>
    <svg:g class="edge">
      <svg:path class="line" stroke-width="2" marker-end="url(#arrow)"></svg:path>
    </svg:g>
  </ng-template>
</ngx-graph>
